<template>
  <div class="closeX">
    <div class="default">x</div>
    <div class="active" @click="handleClose">x</div>
  </div>
</template>

<script>
export default {
  name: 'CloseBtn',
  methods: {
    handleXChange () {
      $('.default').mouseenter(function() {
        $('.default').css({
          'margin-top': '-.5rem',
          'transition': 'margin-top .3s'
        });
        $('.active').css({
          'margin-top': '0rem',
          'transition': 'margin-top .3s'
        });
      });
      $('.active').mouseover(function() {
        $('.default').css({
          'margin-top': '-.5rem',
          'transition': 'margin-top 0s'
        });
        $('.active').css({
          'margin-top': '0rem',
          'transition': 'margin-top 0s'
        });
      });
      $('.active').mouseleave(function() {
        $('.default').css({
          'margin-top': '0rem',
          'transition': 'margin-top .3s'
        });
        $('.active').css({
          'margin-top': '5rem',
          'transition': 'margin-top .3s'
        });
      });
    },
    handleClose (el) {
      this.$emit('close');
    }
  },
  mounted () {
    this.handleXChange();
  }
}
</script>

<style lang="stylus" scoped>
  .closeX
    position: absolute
    right: 0
    top: 0
    width: .5rem
    height: .5rem
    line-height: .5rem
    font-size: .4rem
    text-align: center
    margin-top: .15rem
    margin-right: .15rem
    overflow: hidden
    .default
      color: #aaa
      cursor: pointer
    .active
      color: $font-blue
      cursor: pointer
</style>